<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/img/shortcut icon.ico">

<title>Homework</title>

<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="assets/css/main.css" rel="stylesheet">

<script src="assets/js/statistics.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="assets/js/html5shiv.js"></script>
  <script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>

<body>


<div class="container">
	<div class="col-lg-6 col-lg-offset-3">
	
		<!-- ===== vCard Navigation ===== -->
		<div class="row w">
			<div class="col-md-4">
				<img class="img-responsive" src="assets/img/zjq.jpg" alt="">
				<ul class="nav nav-tabs nav-stacked" id="myTab">
					<li class="active"><a href="#FamilyTree">FamilyTree</a></li>
					<li><a href="#SignUp">Sign Up</a></li>
					<li><a href="#Puzzle">Puzzle</a></li>
				  <li><a href="#Game">Game</a></li>
				  <li><a href="#Calculator">Calculator</a></li>
				  <li><a href="#Ring">Ring Menu</a></li>
				  <li><a href="#Movie">Movie Review</a></li>
				  <li><a href="#Recipe">Recipe</a></li>
				</ul>    			
			</div><!-- col-md-4 -->

		<!-- ===== vCard Content ===== -->
			<div class="col-md-8">
				<div class="tab-content">
				<!-- ===== First Tab ===== -->
				  <div class="tab-pane active" id="FamilyTree">
					<h3>FamilyTree</h3>
					<h5>HTML + CSS + JS + GOJS</h5>
					<hr>
					<h4>家谱</h4>
					<p>进入后双击空白新建一个节点来开始吧！<br>双击、拖动、编辑、撤销还原、右键操作等等由您来探索！</p>
					<hr>
					<p><a href="FamilyTree/edit.html" target="_blank"><strong>View</strong></a><br></p>
				  </div><!-- Tab Profile -->

				<!-- ===== Second Tab ===== -->
				  <div class="tab-pane" id="SignUp">
					<h3>Sign Up</h3>
					<h5>HTML + CSS + JS + Node.js</h5>
					<hr>
					<h4>用户注册</h4>
					<p>简单的前后端验证</p>
					<hr>
					<p><a href="signUp.rar" target="_blank"><strong>下载压缩包</strong></a><br></p>
				  </div><!-- Tab Profile -->

				<!-- ===== Second Tab ===== -->
				  <div class="tab-pane" id="Puzzle">
					<h3>Puzzle</h3>
					<h5>HTML + CSS + JS</h5>
					<hr>
					<h4>拼图</h4>
					<p>Sliding Puzzle</p>
					<hr>
					<p><a href="web6/index.html" target="_blank"><strong>View</strong></a><br></p>
				  </div><!-- Tab Profile -->

				<!-- ===== Second Tab ===== -->
				  <div class="tab-pane" id="Game">
					<h3>Game</h3>
					<h5>HTML + CSS + JS</h5>
					<hr>
					<h4><a href="web5/maze/index.html" target="_blank">迷宫</a></h4>
					<p>正常赢：移动鼠标，从S开始，到E结束，中间不碰墙，赢得游戏，显示“You Win” <br>碰墙输：从S开始后，到E结束之前，碰墙，墙变红，输，显示“You Lose” <br>重置结果：离开迷宫，墙恢复正常；从S开始时，隐藏结果显示 <br>发现作弊：如果用户未经过S，就指到E，又或者指向S之后，从迷宫外绕路指向E，显示"Don't cheat, you should start form the 'S' and move to the 'E' inside the maze!" <br></p>
					<hr>
					<h4><a href="web5/Whac-A-Mole/index.html" target="_blank">打地鼠</a></h4>
					<p>能够随机出现地鼠，鼠标能够击中（点击正确，地鼠消失，出现新地鼠；点击错误，地鼠不消失）</p>
				  </div><!-- Tab Profile -->

				<!-- ===== Second Tab ===== -->
				  <div class="tab-pane" id="Calculator">
					<h3>Calculator</h3>
					<h5>HTML + CSS + JS</h5>
					<hr>
					<p>实现一个简单的普通四则运算计算器。</p>
					<hr>
					<p><a href="web4/index.html" target="_blank"><strong>实践版</strong></a>（支持键盘输入，非侵入式编程）<br><a href="msc/index.html" target="_blank"><strong>启蒙版</strong></a>（主动优化非法输入）<br></p>
				  </div><!-- Tab Profile -->

				  <!-- ===== Second Tab ===== -->
				  <div class="tab-pane" id="Ring">
					<h3>Ring Menu</h3>
					<h5>HTML + CSS</h5>
					<hr>
					<p>在给定源代码的基础上，完成@+环形菜单的CSS。动画部分可用CSS3的transition来实现。</p>
					<hr>
					<p><a href="web3/advancedEdition/index.html" target="_blank"><strong>激进版</strong><br><a href="web3/compatibleEdition/index.html" target="_blank"><strong>兼容版</strong></a><br></p>
				  </div><!-- Tab Profile -->
				  
				  <!-- ===== Second Tab ===== -->
				  <div class="tab-pane" id="Movie">
					<h3>Movie Revie</h3>
					<h5>HTML + CSS</h5>
					<hr>
					<p>This assignment tests your understanding of XHTML and CSS for layout, positioning, and the CSS box model.</p>
					<hr>
					<p><a href="web2/skeleton.html" target="_blank"><strong>View</strong></a><br></p>
				  </div><!-- Tab Profile -->
				  
				  <!-- ===== First Tab ===== -->
				  <div class="tab-pane" id="Recipe">
					<h3>Recipe</h3>
					<h5>HTML + CSS</h5>
					<hr>
					<p>This assignment tests your understanding of basic HTML and CSS. </p>
					<hr>
					<p><a href="web1/index.html" target="_blank"><strong>View</strong></a><br></p>
				  </div><!-- tab about -->

					  </div><!-- row -->
				  </div><!-- Tab Contact -->
				  
				</div><!-- Tab Content -->
			</div><!-- col-md-8 -->
		</div><!-- row w -->
	</div><!-- col-lg-6 -->
</div><!-- /.container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})	
</script>    

</body>
</html>